import { Typography } from "antd";
import { TitleProps } from "antd/es/typography/Title";
import React from "react";
import styled from "styled-components";

const { Title } = Typography;

// 定义 Title 的基础样式 + 移动端响应式样式
const StyledTitle = styled(Title)<TagPropsNew>`
  font-family: Montserrat;
  font-weight: 700;
  line-height: 54px;
  color: ${(props) => props.titleColor || "#7a6145"};
  font-size: 36px; // 桌面端默认字体大小

  // 移动端（屏幕宽度 ≤768px）字体缩小
  @media (max-width: 768px) {
    font-size: 18px !important; // 移动端字体大小（可根据需求调整）
    line-height: 26px !important; // 同步调整行高保持比例
  }
`;

// 定义 SubTitle 的基础样式 + 移动端响应式样式
const StyledSubTitle = styled(Title)<TagPropsNew>`
  font-family: Roboto;
  font-weight: 400;
  line-height: 40px;
  color: ${(props) => props.titleColor || "#202020"};
  font-size: 28px; // 桌面端默认字体大小

  // 移动端（屏幕宽度 ≤768px）字体缩小
  @media (max-width: 768px) {
    font-size: 16px !important; // 移动端字体大小（可根据需求调整）
    line-height: 24px !important; // 同步调整行高保持比例
  }
`;

// 扩展 Typography.Title 的类型，添加额外的属性
interface TagPropsNew extends TitleProps {
  bgColor?: string;
  titleColor?: string;
}

// 创建 CustomTitle 组件（简化内联样式，直接使用 StyledTitle 的样式）
const CustomTitle: React.FC<TagPropsNew> = (props) => (
  <StyledTitle level={props.level || 1} {...props}>
    {props.children}
  </StyledTitle>
);

// 创建 CustomSubTitle 组件（简化内联样式，直接使用 StyledSubTitle 的样式）
const CustomSubTitle: React.FC<TagPropsNew> = (props) => (
  <StyledSubTitle level={props.level || 3} {...props}>
    {props.children}
  </StyledSubTitle>
);

const RenderLabel = (label: string) => {
  return <CustomSubTitle style={{ fontSize: "20px" }}>{label}</CustomSubTitle>;
};

export { CustomSubTitle, CustomTitle, RenderLabel };
